<template>
  <div style="margin-left: 10px">
    <van-cell title="头像" is-link @click="toEdit('avatar', '头像', $store.state.user.avatar)">
      <template #title>
        <van-row>
          <van-col span="5">
            <img style="height: 48px;" :src="$store.state.user.avatar" alt="头像"/>
          </van-col>
          <van-col span="8">
            <van-row>
              <span>{{$store.state.user.nickname}}</span>
            </van-row>
            <van-row>
              <van-tag :color="$store.state.user.status === 0 ? '#15b712' : '#FF6969'" plain>
                {{$store.state.user.status === 0 ? '正常' : '封号'}}
              </van-tag>
            </van-row>
          </van-col>
        </van-row>
      </template>
    </van-cell>
    <van-cell
        :value="$store.state.user.profile.length > 45 ? $store.state.user.profile.substring(0, 45) + '...' : $store.state.user.profile"
        is-link
        style="font-size: smaller;color: #93939b; height: 65px"
        @click="toEdit('profile', '简介', $store.state.user.profile)" />
    <van-cell title="昵称" is-link :value="$store.state.user.nickname" @click="toEdit('nickname', '昵称', $store.state.user.nickname)"/>
    <van-cell title="角色" :value="$store.state.user.role === 1 ? '管理员' : '普通用户'"/>
    <van-cell title="性别" is-link :value="$store.state.user.gender === 0 ? '男' : $store.state.user.gender === 1 ? '女' : '保密' " @click="showSheet = true" />
    <van-action-sheet v-model:show="showSheet" :actions="actions" @select="onSelect" />
    <van-cell title="电话" is-link :value="$store.state.user.phone" @click="toEdit('phone', '电话', $store.state.user.phone)"/>
    <van-cell title="邮箱" is-link :value="$store.state.user.email" @click="toEdit('email', '邮箱', $store.state.user.email)"/>
    <van-cell title="注册时间" :value="$store.state.user.createTime" />
  </div>
  <div style="margin: 20px 20px 0 20px;">
    <van-button color="#FF6969" block round @click="logoutAccount" style="margin-top: 10px">
      退出登录
    </van-button>
  </div>
</template>

<script setup>
  import router from "@/router";
  import {ref} from "vue";
  import {Notify, Toast} from "vant";
  import {useStore} from "vuex";
  import {getInfo, logout, updateUserInfo} from "@/api/user";

  let store = useStore();

  // 性别修改选项
  const showSheet = ref(false);
  const actions = [
    { name: '男' },
    { name: '女'},
    { name: '保密' },
  ];
  const onSelect = async (item) => {
    // 修改请求
    updateUserInfo("gender", item.name === '男' ? 0 : item.name === '女' ? 1 : -1).then(res => {
      if (res.code === 20000) {
        store.state.user.gender = item.name === '男' ? 0 : item.name === '女' ? 1 : -1;
        showSheet.value = false;
        Toast(item.name);
      } else {
        Notify({ type: 'warning', message: `${res.message}` });
      }
    }).catch(res => {
      console.log(res.message);
    });
  };

  const toEdit = (editKey, editName, currentValue) => {
    console.log(editKey, ' ', editName, ' ', currentValue)
    router.push({
      path: '/user/edit',
      query: {
        editKey,
        editName,
        currentValue,
      }
    });
  };

  const logoutAccount = () => {
    // 退出请求
    console.log('退出成功')
    logout().then(res => {
      if (res.code === 20000) {
        localStorage.removeItem('jwt_token');
        store.commit('logout');
        Toast('退出成功');
        router.push('login')
      } else {
        Notify({ type: 'warning', message: `${res.description}` });
        console.log('register error')
      }
    }).catch(res => {
      console.log(res.message)
    });
  }
</script>

<style scoped>

</style>
